<!DOCTYPE html>
<html>
<head>
	@include("/include/_header.html", {'title':'微信支付'}){}
</head>
<body>
<div class="layui-fluid">
 <div class="layui-row layui-col-space15">
    <div class="layui-col-md8" style="margin-top:-10px; height:65px;">
      <div class="layui-card">
      	<ul class="layui-nav" lay-filter="component-nav">
            <li class="layui-nav-item"><a href="javascript:;" style="font-size: 20px;">演示微信支付</a></li>
            <li class="layui-nav-item" style="font-weight: bold;"><a href="javascript:;">订单确认</a></li>
            <li class="layui-nav-item" style="float: right;"><a href="javascript:;">账号：${company!}</a></li>
          </ul>
      </div>
      </div>
 </div>
  <div class="layui-row layui-col-space15">
  	<div class="layui-col-md2" style="margin-top:-12px;"></div>
    <div class="layui-col-md8" style="margin-top:-12px;">
      <div class="layui-card" id="weixin-pay-result">
        <div class="layui-card-header" style="height: 35px;">确认支付</div>
        <div class="layui-card-body" style="text-align: center;">
        	<div class="layui-form">
        		<div class="layui-form-item" style="margin-top:-12px">
	            	<label class="layui-form-label">商品订单:</label>
	            	<div class="layui-input-inline">
	                	<div class="layui-form-mid">${orderNo}</div>
						<input type="hidden" name="orderNo" id="orderNo" value="${orderNo}">
	            	</div>
	          	</div>
	          	<div class="layui-form-item" style="margin-top:-15px">
	            	<label class="layui-form-label">商品名称:</label>
	            	<div class="layui-input-inline">
	                	<div class="layui-form-mid">${name!}</div>
	            	</div>
	          	</div>
	          	<div class="layui-form-item" style="margin-top:-15px">
	            	<label class="layui-form-label">购买时间:</label>
	            	<div class="layui-input-inline">
	                	<div class="layui-form-mid" id="payDate" >${payDate}</div>
	            	</div>
	          	</div>
	          	<div class="layui-form-item" style="margin-top:-15px">
	            	<label class="layui-form-label">支付金额:</label>
	            	<div class="layui-input-inline">
	                	<div class="layui-form-mid" id="money" style="color: blue; font-size: 16px; font-weight: bold;">${money}元</div>
	            	</div>
	          	</div>
	          	<div class="layui-form-item" style="margin-top:-10px;">
	            	<label class="layui-form-label">支付方式:</label>
	            	<div class="layui-input-inline">
	                	<img style="width: 170px; height: 45px; margin-left: -30px; margin-top: -15px;" src="https://zh-res-1251505225.cos.ap-shanghai.myqcloud.com/resouces/wechat.png">
	            	</div>
	          	</div>
	          	<hr>
	          	<div class="layui-form-item" style="margin-top: 5px;">
	          		<label class="layui-form-label"></label>
	          		<div class="layui-input-inline">
	                	<img style="width: 200px; height: 180px;" src="${ctxPath}/func/pay/wx/getQrcode?key=${qrcode!}">
	                	<div style="height: 30px;line-height: 30px;background-color: #00c800;font-size: 12px;color: #fff;text-align: center; margin-top: 10px;">请打开手机微信，扫一扫完成支付</div>
	            	</div>
	            	<div class="layui-input-inline">
	                	<img style="width: 206px; height: 220px; margin-left: 50px; margin-top: -10px;" src="https://zh-res-1251505225.cos.ap-shanghai.myqcloud.com/resouces/ep_sys_wx_tip.jpg">
	            	</div>
	          	</div>
        	</div>
        </div>
      </div>
    </div>
  </div>
</div>
	
 <script type="text/javascript">
 	 layui.config({
		     base: CXL.ctxPath + '/layuiadmin/' //静态资源所在路径
		  }).extend({
		    index: 'lib/index' //主入口模块
		  }).use(['index', 'layer'], function() {
		var $ = layui.$;
		var view = layui.view;
		var setter = layui.setter;
		var router = layui.router();
		
		//轮训刷新，获取支付状态
		var i = 0;
		var timer = setInterval(function(){getPayStatus(timer);},3000);
		function getPayStatus(timer) {
			i++;
			
			if(i > 100) {
				//清除
				clearInterval(timer);
				
				//重新渲染，结果显示
				location.href="${ctxPath}/func/pay/wx/getWxPayReuslt";
				
			}
			//请求结果
			var orderNo = $("#orderNo").val();
			
			$.post(CXL.ctxPath + '/func/pay/wx/getWxOrderStatus', {orderNo:orderNo}, function(res) {
			
				if(res.success){
					//清除
					clearInterval(timer);
					
		      		var payStatus = res.obj;
		      		var payDate = document.getElementById("payDate").innerText;
		      		var money = document.getElementById("money").innerText;
		      		
					//重新渲染，结果显示
					location.href="${ctxPath}/func/pay/wx/getWxPayReuslt?payStatus=" + payStatus + "&orderNo=" + orderNo + "&payDate=" + payDate + "&money=" + money;
				}	
			
			})
		}
	})
 </script>
	
</body>
</html>